import React from 'react'
import { Tabs } from 'antd';
import Automatic from './Automatic'
// import './index.css'
const { TabPane } = Tabs;

class Test extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
    }
  }
  render() {
    return (
      <div className="card-container">
        <Tabs tabBarStyle={{borderBottom:'1px solid #bbb'}}>
          <TabPane tab="自动挡" key="1">
            <Automatic />
          </TabPane>
          <TabPane tab="Tab Title 2" key="2">
            <p>Content of Tab Pane 2</p>
            <p>Content of Tab Pane 2</p>
            <p>Content of Tab Pane 2</p>
          </TabPane>
          <TabPane tab="Tab Title 3" key="3">
            <p>Content of Tab Pane 3</p>
            <p>Content of Tab Pane 3</p>
            <p>Content of Tab Pane 3</p>
          </TabPane>
        </Tabs>
      </div>
    );
  }
}

export default Test

// .card-container > .ant-tabs-card > .ant-tabs-content {
//   height: 120px;
//   margin-top: -16px;
// }

// .card-container > .ant-tabs-card > .ant-tabs-content > .ant-tabs-tabpane {
//   background: #fff;
//   padding: 16px;
// }

// .card-container > .ant-tabs-card > .ant-tabs-bar {
//   border-color: #fff;
// }

// .card-container > .ant-tabs-card > .ant-tabs-bar .ant-tabs-tab {
//   border-color: transparent;
//   background: transparent;
// }

// .card-container > .ant-tabs-card > .ant-tabs-bar .ant-tabs-tab-active {
//   border-color: #fff;
//   background: #fff;
// }